<extend name="./base"/>
<block name="main">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <section class="panel">
                <header class="panel-heading custom-tab ">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#home">相册</a>
                        </li>
                        <li class="">
                            <a data-toggle="tab" href="#about">图片</a>
                        </li>
                        <button class="btn btn-primary create-album pull-right" type="button"
                                style="margin-top: 10px;margin-right: 10px;">创建相册
                        </button>
                    </ul>
                </header>
                <div class="panel-body">
                    <div class="tab-content">
                        <div id="home" class="tab-pane active">
                            <div class="col-sm-12">
                                <section class="panel">
                                    <div class="panel-body">

                                        <div class="media-gal isotope" id="gallery"
                                             style="position: relative; overflow: hidden; height: 759px;">
                                            <?php if(count($albumData)>0):?>
                                            <?php foreach($albumData as $v):?>
                                            <div title="<?=$v['album_describe']?>" album-id="<?=$v['id']?>"
                                                 class="images item isotope-item album-item"
                                                 style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px);">
                                                <a class="edit-album" onclick="edit_album(this);" data-toggle="modal" href="#myModal" time="<?=date('Y-m-d H:i',$v['ctime'])?>">
                                                    <img alt="" src="__PUBLIC__<?php echo ($v['path']==null || $v['path']=='')?'/images/album-default.png':$v['path']; ?>">
                                                </a>
                                                <a href="{:U('Xiangce/photo',array('user_id'=>$userData['id'],'album_id'=>$v['id']))}"><p><?=$v['album_name']?> </p></a>
                                            </div>
                                            <?php endforeach;?>
                                            <?php endif;?>
                                        </div>


                                        <!-- Modal -->
                                        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
                                             tabindex="-1" id="myModal" class="modal fade">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <button aria-hidden="true" data-dismiss="modal" class="close"
                                                                type="button">×
                                                        </button>
                                                        <h4 class="modal-title">编辑相册信息</h4>
                                                    </div>

                                                    <div class="modal-body row">

                                                        <div class="col-md-5 img-modal">
                                                            <img class="album-modal-img" alt="" src="">
                                                            <p class="mtop10"><strong>创建时间</strong>　<span
                                                                    class="album-modal-time"></span>
                                                            </p>
                                                            </p>
                                                        </div>
                                                        <div class="col-md-7">
                                                            <div class="form-group">
                                                                <label>标题</label>
                                                                <input class="form-control album-modal-name" value=""
                                                                       id="title">
                                                            </div>
                                                            <div class="form-group">
                                                                <label>描述</label>
                                                                <textarea class="form-control album-modal-describe"
                                                                          rows="2"></textarea>
                                                            </div>
                                                            <div class="pull-right">
                                                                <button type="button"
                                                                        class="btn btn-danger btn-sm del-album">
                                                                    删除
                                                                </button>
                                                                <button type="button"
                                                                        class="btn btn-success btn-sm send-album-data">
                                                                    保存
                                                                </button>
                                                            </div>
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                        <!-- modal -->

                                    </div>
                                </section>
                            </div>
                        </div>
                        <div id="about" class="tab-pane">
                            <p>Vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                                aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable
                                VHS.</p>
                            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
                                squid. 3 wolf moon officia aute,</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>

    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModalAlbum" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        创建相册
                    </h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="margin-bottom:10px;">相册标题：<input type="text" name="album_name"/></div>
                        <div>相册描述：<textarea name="album_describe"></textarea></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary savealbum">
                        确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</block>
<block name="script">
    <script type="text/javascript">
        edit_album_id = 0;
        $(function () {
            var $container = $('#gallery');
            $container.isotope({
                itemSelector: '.item',
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });

            $('#filters a').click(function () {
                var selector = $(this).attr('data-filter');
                $container.isotope({filter: selector});
                return false;
            });
        });
        function edit_album(obj) {
            edit_album_id = $(obj).parent().attr('album-id');
            $('.album-modal-img').attr('src', $(obj).find('img').attr('src'));
            $('.album-modal-name').val($(obj).next().text());
            $('.album-modal-describe').val($(obj).parent().attr('title'));
            $('.album-modal-time').html($(obj).attr('time'));
        }
        //删除相册
        $('.del-album').click(function () {
            $.ajax({
                type: "POST",
                url: "{:U('Xiangce/delAlbum',array('user_id'=>$myUserData['id']))}",
                data: {id: edit_album_id},//填写ajax传送的数据
                success: function (data) {
                    if (data.status == 0) {
                        alert('相册删除成功!');
                        //删除当前页面的相册div
                        $("div[album-id='" + edit_album_id + "']").remove();
                        $('#myModal').modal('hide');
                    } else if (data['status'] == 1) {
                        alert('相册删除失败!');
                    }
                }
            });
        });
        //编辑相册
        $('.send-album-data').click(function () {
            //收集数据
            var album_name = $('.album-modal-name').val();
            var album_describe = $('.album-modal-describe').val();
            //发送ajax
            $.ajax({
                type: "POST",
                url: "{:U('Xiangce/editAlbum',array('user_id'=>$myUserData['id']))}",
                data: {
                    id: edit_album_id,
                    album_name: album_name,
                    album_describe: album_describe
                },//填写ajax传送的数据
                success: function (data) {
                    if (data.status == 0) {
                        //更新原先的数据
                        $("div[album-id='" + edit_album_id + "'] p").html(album_name);
                        $("div[album-id='" + edit_album_id + "']").attr('title', album_describe);
                        alert(data.message);
                        $('#myModal').modal('hide');
                    } else if (data['status'] == 1) {
                        alert(data.message);
                    }
                }
            });
        });
        //创建相册
        $('.create-album').click(function () {
            $('#myModalAlbum').modal('show');
        });
        //发送相册数据
        $('.savealbum').click(function () {
            $('#myModalAlbum').modal('hide');
            $.ajax({
                type: "POST",
                url: "{:U('Xiangce/createAlbum',array('user_id'=>$myUserData['id']))}",
                data: $('#myModalAlbum form').serialize(),
                success: function (data) {
                    if (data.status == 0) {
                        var num = $('.album-item').length+1;
                        var x = (num%7)*248;
                        var y = Math.floor(num/7)*255;
                        $('#gallery').append('<div title="'+$('#myModalAlbum form input').val()+'" album-id="'+data.id+'"\
                    class="images item isotope-item album-item"\
                        style="position: absolute; left: 0px; top: 0px; transform: translate3d('+x+'px, '+y+'px, 0px);">\
                                <a class="edit-album" onclick="edit_album(this);" data-toggle="modal" href="#myModal" time="'+data.ctime+'">\
                                <img alt="" src="__PUBLIC__/images/album-default.png">\
                        </a>\
                        <a href="'+"{:U('Xiangce/photo',array('user_id'=>$userData['id']))}?album_id="+data.id+'"><p>'+$('#myModalAlbum form textarea').val()+'</p></a>\
                        </div>');
                    }
                    alert(data.message);
                }
            });
        });
    </script>
</block>